<template>
    <div class="gray-body w750">
        <van-tabs v-model="active"  :color="themes.color" :title-active-color="themes.color"  @change="switchType" sticky :offset-top='0'>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-tab :title="item" v-for="(item, index) in navArr" :key="index">
                    <van-list
                        v-if="paging.tab"
                        v-model="paging.loading"
                        :finished="paging.finished"
                        :finished-text="!paging.emptylist?'没有更多了':''"
                        @load="onLoad"
                        :immediate-check="false"
                        :error.sync="paging.error"
                        error-text="请求失败，点击重新加载"
                    >
                        <div class='order-list' :class="themes.theme">
                            <div class='list-item' v-for="(order, index) in warrantyList" :key="index">
                                <div class="item-tit">
                                    <div class="order-num"> 订单号：<span class="num">{{order.orderNo}}</span></div>
                                    <div class="order-state"><div class="sta" :style="order.status == 'activated' ? 'color:rgb(165,214,150)' : 'color:#999'">{{order.status == 'expired' ? '已过期' : '已激活'}}</div></div>
                                </div>
                                <div class="pro-mes clearfix">
                                    <div class="pro-img">
                                        <!-- <img v-lazy="$imgUrlHead + item.pic" alt=""> -->
                                        <legend-image :pic="order.pic" :options="{w:'140',h:'140'}" />
                                        <img src="@/assets/images/haitao-small.png"  class="haitao" v-if="item.goodsType == 'overseas'" />
                                        <span class="text" v-if="order.isPresent == true">赠品</span>
                                    </div>
                                    <div class="pro-name">
                                        <div  class="name">{{order.prodName}}</div>
                                        <div class="sku">{{order.attribute}}</div>
                                    </div>
                                </div>
                                <div class="item-btn">
                                    <span class="expiredTime">过期时间：{{order.expiredTime | dateformat("YYYY-MM-DD HH:mm:ss")}}</span>
                                    <span  class="btn cur" @click.stop="goWarrantyCard(order, order.orderNo)">查看详情</span>
                                </div>
                            </div>
                        </div>
                    </van-list>
                    <Noempty :pic="require('@/assets/images/order-empty.png')"  :title="'暂无相关质保列表'" v-if="paging.emptylist && !paging.error"  />
                </van-tab>
            </van-pull-refresh>
        </van-tabs>
    </div>
</template>
<script>
import {mapState} from 'vuex'

import Noempty from 'components/Noempty/Noempty';
import legendImage from 'components/legendImage/legendImage';

import {warrantyCardList} from "api/order";
import PageUtil from 'utils/PageUtil';
const pageUtil = new PageUtil(warrantyCardList, {field: {
    list: "warrantyList"
}});

export default {
    components: {
        Noempty,
        legendImage
    },
    computed: {
        ...mapState(['themes']),
    },
    data() {
        return {
            status: '',
            warrantyList: [],
            active: 0,
            isLoading: false,
            paging: {
                tab: false,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false,// 是否显示列表为空时的样式
            },
            navArr: ['全部','已激活','已过期']
        }
    },    
    mounted() {
        pageUtil.loadListByPage(this, {status: ''});
    },
    methods: {
        switchType(e) {
            let statusMap = {
                '0': '',
                '1': 'activated',
                '2': 'expired',
            }
            this.status = statusMap[e]
            pageUtil.loadListByPage(this, {status: statusMap[e]});

        },
        goWarrantyCard(item, subNum) {
            let that = this;
            let str = JSON.stringify({alreadyActivated: true,pic: item.pic,prodName: item.prodName,attribute: item.attribute,subItemId: item.orderItemId});
            this.$router.push({
                path: `/warrantyCard`,
                query: {
                    contant: str,
                    subNum,
                },
            });
        },
        //加载
        onLoad() {
            pageUtil.loadListByPageMore();
        },
        onRefresh() {
            let that = this
            setTimeout(() => {
                
                pageUtil.loadListByPage(this, {status: this.status}, {
                    success: function(code, res) {
                        that.$toast('刷新成功');
                    },
                    error: function(e) {
                        that.$toast('刷新失败');
                    },
                    complete: function() {
                        that.isLoading = false;
                    }
                });
            
                // this.count++;
            }, 500);
        }
    }
}
</script>
<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/order.css" scoped></style>
<style lang="stylus" scoped>
    
    .order-list .list-item .pro-mes {
        background:#fff;
    }
    .order-list .list-item .pro-mes .pro-img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
    }
    .order-list .list-item .pro-mes .pro-name {
        height: 60px;
    }
    
    .order-list .list-item .item-btn {
        justify-content: flex-start;
        align-items: center;
    }
    .order-list .list-item .item-btn .expiredTime{
        margin-right: auto;
        margin-left: 5px;
        color: #999;
    }
</style>